<style>
	.own .title {
		display:none;
	}
	
	.own strong {
		display:none;
	}
	
	#look {
		display: block;
		position: relative;
		width:266px;
		height:500px;
		text-align:center;
	}
	
	#look .lookitem {
		position: absolute;
		width: 150px;
		height: 150px;
		border:1px solid transparent;
	}
	
	#look .lookitem img {
		width: 150px;
		height: 150px;
	}
	
	#look .lookitem span {
		position: absolute;
		top:-15px;
		right:-5px;
		display: none;
	}
	
	#look .lookitem .tag {
		position: absolute;
		top: 30%;
		left: 60%;
		background:url(/images/tag.png) no-repeat;
		width:60px;
		height:54px;
	}

	#look .lookitem .ui-resizable-handle {
		display: none!important
	}
	
	#look .lookitem.selected {
		border:1px dotted gray;
	}
	
	#look .lookitem.selected span {
		display: block;
	}
	
	#look .lookitem.selected .ui-resizable-handle {
		display: block!important
	}
	
	#look .lookitem.selected .ui-resizable-se {
		display: none!important
	}
	
	#lookName {
		border: 1px solid #e6e6e6;
		margin-bottom: 7px;
		width:185px;
	}
	
	.ui-slider {
		margin-left:10px;
		margin-right:10px;
		background: url(/images/bg-hs.gif) repeat-x scroll 0 0 transparent;
		border: 0px;
	}
	
	.ui-slider .ui-slider-handle {
		background: url(/images/bg-hscroll.gif);
		border: 0px;
	}
	
	.ui-datepicker { width: 205px !important; }
	#events { width: 215px !important; }
	#events .heading { width: 195px !important; }
	
	
	.stripe {
		position: relative;
	}
	
	.stripe .handles {
		display: none;
		width:16px;
		height:16px;
		position: absolute;
		z-index:100;		
	}
	
	.stripe .resize-handle {
		top:0px;
		left:0px;
	}
	
	.stripe .close-handle {
		top:-5px;
		right:0px;
		cursor: pointer;
	}
	
	#look_big {
		width: 532px;
		height: 1000px;
		position: absolute;
		top: 5px;
		left:20%;
		background-color:white;
		border: 1px solid #e2e2e2;
		z-index: 5000;
	}
	
	#look_big div {
		position: absolute;
	}
	
	#look_big .close {
		position: absolute;
		top:5px;
		right:5px;
		width: 16px;
		height: 16px;
		background: url(/images/bg-close.gif) no-repeat;
	}
	#look_big #bg_image {
		width: 532px;
		height: 1000px;
	}
</style>

{literal}
<script id='stripe_closet_item_tpl' type="text/x-jsmart-tmpl">
	<li class=own item_id={$item[0]}>
		<a href="#" class="visual"><img item_id={$item[0]}></a>
		<a href="#" class="title">{$item[4]}</a>
		<strong>{price_fmt price=$item[5]}</strong>
		<div class='descr'>{$item[13]|default:'&nbsp;'}<div>
		{if $showDate}
			<div class='date'>{$item[11]}<div>
		{/if}
	</li>
</script>

<script id='stripe_shop_item_tpl' type="text/x-jsmart-tmpl">
	<li item_id={$item[0]}>
		<a href="#" class="visual"><img item_id={$item[0]}></a>
		<a href="#" class="title">{$item[4]}</a>
		<strong>{price_fmt price=$item[5]}</strong>
		{if $showDate}
			<div class='date'>{$item[8]}<div>
		{/if}
	</li>
</script>

<script id='stripe_tpl' type="text/x-jsmart-tmpl">
	<div class="middle-part stripe" id='{$id}' groupId='{$groupId}' own='{$own}'>
		<div class="handles resize-handle ui-state-default ui-corner-all" title='Переместить'><span class="ui-icon ui-icon-arrow-4"></span></div>
		<div class="handles close-handle" title='Закрыть'><span class="ui-icon ui-icon-close"></span></div>
		<div class="text-box">
			<div class='text-scroll'>
				<div class="long">
					<ul class="list-text">
					{foreach $items as $item}
						{include "{if $own}stripe_closet_item_tpl{else}stripe_shop_item_tpl{/if}" item=$item}
					{foreachelse}
						<div style='display:table-cell; width:506px; height:210px; color:#999; text-align:center; vertical-align:middle;'>
							Нет вещей отвечающих выбранным параметрам
						</div>
					{/foreach}
					</ul>
				</div>
			</div>
			<div id='slider_{$id}'></div>
		</div>
	</div>	
</script>

<script id='item_in_look_tpl' type="text/x-jsmart-tmpl">
	<div class='lookitem' id='lookitem_{$item.id}' productId={$item.id} own='{$own}'>
		<span class='ui-icon ui-icon-close'></span>
		<img src='{$thumbnail}'>
		{if !$own}
			<div class='tag'></div>
		{/if}
	</div>
</script>

<script id='look_del_tpl' type="text/x-jsmart-tmpl">
	<strong style='display:block; padding:50px;'>Вы уверены, что хотите удалить лук?</strong>
	<div style='text-align:right;'>
		<button onclick='hidePopup()'>НЕТ</button>
		<button id='confirm_del'>ДА</button>
	</div>
</script>

<script id='look_big_tpl' type="text/x-jsmart-tmpl">
	<div id='look_big'>
		<img id='bg_image'>
		<a href='#' class='close' title='Закрыть'></a>
	</div>
</script>

<script id='look_item_tpl' type="text/x-jsmart-tmpl">
	<div style="width:{$width}px; height:{$height}px; left:{$left}px; top:{$top}px; z-index:{$zindex};">
		<img src='/{$image}' style="width:{$width}px; height:{$height}px;">
	</div>
</script>

{/literal}


<div id="twocolumns">
	<div id="container"></div>
	<div class="aside1">
		<ul class="menu menu2">
			<li>
				<a href="#">ИМЯ ЛУКА</a><input type=text id='lookName' />
			</li>
			<li id='look_sets'>
				{if $isStylist}<a href="#" class="add-link" onclick="return false;" title='Добавить'></a>{/if}
			</li>
			<li id='look_types'>
				{if $isStylist}<a href="#" class="add-link" onclick="return false;" title='Добавить'></a>{/if}
			</li>
		</ul>
		<ul class="actions-list">
			<li style='position:absolute; left:0px;'>
				<form action='/cf/call/tmp.add' target='tmp_image' method=post enctype='multipart/form-data'>
					<input type=file name='f' style="opacity:0; width:47px; height:47px; cursor:pointer; overflow:hidden;">
				</form>
			</li>
			<li><a href="#" class="silhouette" title='Силуэт'></a></li>
			<li><a href="#" class="save"   onclick='saveLook(); return false;' style='z-index:10;' title='Сохранить'></a></li>
			<li><a href="#" class="update" onclick='loadLook(); return false;' title='Обновить'></a></li>
			<li><a href="#" class="clean"  onclick='clearLook();return false;' title='Очистить'></a></li>
			<li><a href="#" class="new"    onclick='newLook();  return false;' title='Новый'></a></li>
			<li><a href="#" class="remove" onclick='delLook();  return false;' title='Удалить'></a></li>
			<li><a href="#" class="open"   onclick='openLook(); return false;' title='Просмотр'></a></li>
		</ul>
		<div class="img-block">
			<div class="img-block-holder">
				<div class="img-block-frame">
					<div id='look'>
						<img id='look_background'>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

<div class="aside2">
	<div class="tabs-area">
		<ul class="tabset">
			<li><a href="#tab-1" class="tab active"><span>ШКАФ</span></a></li>
			<li><a href="#tab-2" class="tab"><span>СТОЛ ЗАКАЗОВ</span></a></li>
		</ul>
		<div class="tab-content" id="tab-1">
			<div class="tab-content-holder">
				<div class="tab-content-frame">
					<ul class="menu">
						<li class="opener" id='own'>
							<a href="#" class='title'>КАТЕГОРИЯ</a>
							<ul>
							</ul>
						</li>
						<li id='closets'>
						</li>
						<li id='owner_brands'>
						</li>
						<li id='owner_seasons'>
						</li>
						<li id='bought'>
						</li>
					</ul>
					<a href="#" class="add-link" onclick='openClosetItem(0); return false;'>Add</a>
				</div>
			</div>
		</div>
		<div class="tab-content" id="tab-2">
			<div class="tab-content-holder">
				<div class="tab-content-frame">
				
					<div class="choice-form">
						<fieldset>
							<label>От cтилиста</label>
							<div class='checkboxArea' id='only_recommended'></div>
						</fieldset>
					</div>
					
					<ul class="menu">
						<li class="opener" id='shop'>
							<a href="#" class='title'>КАТЕГОРИЯ</a>
							<ul>
							</ul>
						</li>
						<li id='brands'>
						</li>
						<li id='seasons'>
						</li>
						<li id='added'>
						</li>
					</ul>
					{if $isStylist}
						<a href="#" class="add-link" onclick="openShopItemStylist(0,function(){ refreshGalleries(); }); return false;" title="Добавить"></a>
					{/if}
				</div>
			</div>
		</div>
	</div>
	
	{include 'calendar.tpl'}
</div>


<form class='pop-up' id='newLookSet'>
	<input type=text name='name' size=25 />
</form>

<form class='pop-up' id='newLookType'>
	<input type=text name='name' size=25 />
</form>

<script>
	var lookId = 0;
	var lookZIndex = 0;
	var lookType = 0;
	var lookSet = 0;
	
	var shopFilter = {};
	var closetFilter = {};
	
	function onShowGallery(id, items, own) {
		var stripeId = 'stripe_' + (parseInt(own) ? 'own_' : 'shop_') + id;
		var stripe = $('#stripe_tpl').html().fetch({ 
			'id': stripeId, 
			'groupId': id, 
			'items': items, 
			'own': own, 
			'showDate': (own ? ('bought' in closetFilter ? 1 : 0) : ('added' in shopFilter ? 1 : 0)) 
		});
		
		if ($('#container #'+stripeId).length) {
			$('#container #'+stripeId).replaceWith(stripe);
		} else {
			$('#container').prepend(stripe);
			saveOpenedGalleries();
		}
		
		var onThumbLoad = function(img) {
			return function(thumbnail) {
				img.attr('src',thumbnail);
			}
		};
		for (var i=0; i<items.length; ++i) {
			call('image.getThumbnail', { 'path': items[i][3], 'width':100, 'height':150 } ).done( 
				onThumbLoad( $('#'+stripeId+' img[item_id='+items[i][0]+']') )
			);
		}
		
		if (items.length > 4) {
			$('#slider_'+stripeId).slider( {
				'max': items.length-4, //-NUMBER OF ITEMS VISIBLE IN STRIP
				'slide': function(e, ui) { 
					var margin = 130*ui.value*-1;
					$('#'+stripeId+' .long').animate( { 'margin-left': margin+'px' }, 100);
				}
			} );

			$('#'+stripeId).mousewheel(function(e, delta){
				e.preventDefault();
				var pos = $('#slider_'+stripeId).slider('value');
				pos -= delta;
				if (pos >=0 && pos <= items.length-4) {
					$('#slider_'+stripeId).slider('value',pos).trigger('slide');
					var margin = 130*pos*-1;
					$('#'+stripeId+' .long').animate( { 'margin-left': margin+'px' }, 100);
				}
			});
		}
		
		$('.visual img').draggable( {
			appendTo: 'body',
			containment: 'document',
			helper: 'clone',
			start: function(event, ui) { ui.helper.css('z-index',10000); }
		} );
		
		$('#container #'+stripeId).on({
			'mouseenter':function(e){  $(this).find('.handles').show(); },
			'mouseleave': function(e){ $(this).find('.handles').hide(); }
		});
		
		$('#container #'+stripeId+' .close-handle').click(function(e){
			var own = parseInt($(this).closest('.stripe').attr('own'));
			selectInMultipleOpener(own ? 'own':'shop', $(this).closest('.stripe').attr('groupid'));
		});
		
		$('#'+stripeId+' li a').on('click',function(e){
			e.preventDefault();
			var li = $(e.target).closest('li');
			li.hasClass('own') ? openClosetItem(li.attr('item_id'),function(){ showGallery(id,1); }) : openShopItem(li.attr('item_id'), function(){ refreshGalleries(); });
		});
	}

	function showGallery(id,own) {
		call('admin.getList', { 
			'id':(own?'closet_items':'shop_items'), 
			'params': { 'clientId':clientId }, 'filter':$.extend({ 'groupId':id },(own ? closetFilter : shopFilter))
		}).done(function(items){ 
			onShowGallery(id,items,own); 
		});
	}
	
	function refreshGalleries() {
		$('#container .stripe').each(function(){
			showGallery($(this).attr('groupId'), parseInt($(this).attr('own')));
		});
		
		call('session.set',{ 'name':'closet_filter', 'value':{ 'shop':shopFilter, 'closet':closetFilter } });
	}
	
	function saveOpenedGalleries() {
		var galleries = [];
		$('#container .stripe').each(function(){
			galleries.push([$(this).attr('groupId'), parseInt($(this).attr('own'))]);
		});
		call('session.set',{ 'name':'closet_galleries', 'value':galleries });
	}

	function addInLook(id, width, height, left, top, zindex) {
		$.when(
			call('shop.getProduct', { 'id': id } ),
			call('admin.findByKey',{ 'vid':'closet_items', 'k':id, 'params':{ 'clientId':clientId } })
		).done(function(product, closetItem) {
			call('image.getThumbnail', { 'path': product[0].image, 'width':300, 'height':300 } ).done( function(thumbnail) {
				var own = ('id' in closetItem[0]);
				var item = $($('#item_in_look_tpl').html().fetch({ 'item':product[0], 'own':own, 'thumbnail':thumbnail }));
				$('#look').append(item);
				item.width(width).height(height);
				item.find('img').width(width);
				item.find('img').height(height);
				item.css('left',left+'px').css('top',top+'px').css('z-index',zindex);
				item.on( {
					'mouseover': function(e) { $(e.target).closest('.lookitem').addClass('selected'); },
					'mouseout':  function(e) { $(e.target).closest('.lookitem').removeClass('selected'); },
					'mousedown': function(e) { $(e.target).closest('.lookitem').css('z-index',++lookZIndex); },
					'dblclick': function(e) { var pid = $(this).closest('.lookitem').attr('productid'); if (own){ openClosetItem(pid); }else{ openShopItem(pid, function(){ refreshGalleries(); }); } }
				} );
				item.draggable( { containment: 'parent'	} );
				item.resizable( { 
					aspectRatio: true,
					alsoResize: '#lookitem_'+id+' img',
					handles: 'n, e, s, w, se, sw, nw',
					containment: 'parent',
					maxHeight: 300,
					maxWidth: 300
				} );
				item.find('span').on( {
					'click': function(e) { item.remove(); }
				} );			
			} );
		} );
	}
	
	function loadLook() {
		clearLook();
		if (!lookId) {
			return;
		}
		$.when(
			call('admin.findByKey',{ vid:'look', k:lookId } ),
			call('admin.getList',{ id: 'look_items', params: { 'lookId':lookId  } } )
		).done( function(look,items) {
			if ('name' in look[0]) {	//lookId stored in session may not be of an available look
				$('#lookName').val(look[0].name);
				lookType = look[0].type_id ? look[0].type_id : 0;
				lookSet = look[0].set_id ? look[0].set_id : 0;
				$('#look_sets').opener('value', lookSet);
				$('#look_types').opener('value', lookType);
				lookZIndex = 0;
				for (var i=0; i<items[0].length; ++i) {
					addInLook(items[0][i][1], items[0][i][2], items[0][i][3], items[0][i][4], items[0][i][5], ++lookZIndex);
				}
				if (look[0].image) {
					call('image.getThumbnail', { 'path':look[0].image, 'width':270, 'height':500 } ).done( function(thumbnail) {
						$('#look_background').attr('src',thumbnail).attr('orig',look[0].image).show();
					});
				}
			}
			else {
				lookId = 0;
			}
			updateButtons();
		} );
	}
	
	function clearLook() {
		$('#look .lookitem').remove();
		$('#look_background').removeAttr('src').removeAttr('orig').hide();
		$('#popupBox .file form').tmpFile('cancel');
		updateButtons();
	}
	
	function newLook() {
		lookId = 0;
		clearLook();
		$('#lookName').val('');
	}
	
	function delLook() {
		popup('Подтверждение',$('#look_del_tpl').html().fetch({ }));
		
		$('#popupBox').find('#confirm_del').click(function(e){
			call('admin.doAction', { id:'look_del', 'params': { 'id':lookId } } ).done( function() {
				newLook();
			} );
			hidePopup();
		});
	}
	
	function saveLook(onComplete) {
		var nm = $('#lookName').val();
		if (!nm) {
			nm = ' ';
			$('#lookName').val(nm);
		}
		
		call('admin.doAction', { id:'look_del', 'params': { 'id':lookId } } ).done( function() {
		
			$('.actions-list form').tmpFile('save','looks');
			
			var params = {
				'name': nm,
				'clientId': clientId,
				'stylistId': isStylist ? stylistId : 0,
				'typeId': lookType,
				'setId': lookSet,
				'image': $('#look img').attr('orig') || ''
			};
			call('admin.doAction', { id:'look_add', 'params':params } ).done( function(newId) {
				lookId = newId;
				var items = [];
				$('#look .lookitem').each(function(i) {
					items.push( {
						'itemId': $(this).attr('productId'),
						'width': $(this).width(),
						'height': $(this).height(),
						'left': $(this).position().left,
						'top': $(this).position().top,
						'zindex': $(this).css('z-index')
					} );
				} );
				
				if (items.length) {
					call('admin.doActionBulk',{ id:'look_item_add', bulkParams:items, 'params':{ 'lookId':lookId } }).done( function() {
						if (onComplete) {
							onComplete();
						}
					} );
				}
			} );
		} );
	}
	
	function openLook()
	{
		if (!lookId) {
			alert("Сохраните лук");
			return;
		}
		
		$.when(
			call('admin.findByKey',{ vid:'look', k:lookId } ),
			call('admin.getList',{ id: 'look_items', params: { 'lookId':lookId  } } )
		).done( function(look,items) {
		
			overlay();
			$('body').append( $('#look_big_tpl').html().fetch({ }) );
			$('#look_big').css('left',$(window).width()/2-$('#look_big').width()/2);
			$('#look_big a.close').click(function(e){
				e.preventDefault();
				closeLook();
			});
			
			if (look[0].image) {
				call('image.getThumbnail', { 'path': look[0].image, 'width':$('#look_big').width(), 'height':$('#look_big').height() } ).done( function(thumbnail) {
					$('#look_big #bg_image').attr('src',thumbnail);
				});
			}
			
			for (var i=0; i<items[0].length; ++i) {
				$('#look_big').append( $('#look_item_tpl').html().fetch( { 
					'image':items[0][i][6],
					'width': items[0][i][2]*2,
					'height': items[0][i][3]*2,
					'left': items[0][i][4]*2,
					'top': items[0][i][5]*2,
					'zindex': 5000+i
				} ) );
			}

		} );
	}
	
	function closeLook()
	{
		$('#overlay').hide();
		$('#look_big').remove();
	}
	
	function updateButtons() {
		//...
	}
	
	$(function() {
		$('#look').droppable( {
			tolerance: 'touch',
			drop: function(e, ui) {
				if (ui.draggable.is('img') && ui.draggable.attr('item_id')) {
					var offset = $('#look').offset();
					var top = Math.max(ui.position.top-offset.top,0);
					top = (top+ui.draggable.height()<$('#look').height()) ? top : $('#look').height()-ui.draggable.height()-10;
					var left = Math.max(ui.position.left-offset.left,0);
					left = (left+ui.draggable.width()<$('#look').width()) ? left : $('#look').width()-ui.draggable.width()-10;
					addInLook(ui.draggable.attr('item_id'), ui.draggable.width(), ui.draggable.height(), left, top, ++lookZIndex);
				}
			}
		} );
		
		$('#container').sortable({
			'items': '.stripe',
			'handle': '.resize-handle',
			'stop': function(){ saveOpenedGalleries(); }
		});

		
		createMultipleOpener(
			'own',
			groups,
			function(v) { showGallery(v,1); },
			function(v){ $('#stripe_own_'+v).remove(); saveOpenedGalleries(); }
		);
		
		createMultipleOpener(
			'shop',
			groups,
			function(v) { showGallery(v,0); },
			function(v){ $('#stripe_shop_'+v).remove(); saveOpenedGalleries();}
		);
		
			//first set up dictionaries, than load look
		$.when(
			call('admin.getList', { 'id':'look_types', 'params': { 'clientId':clientId } } ),
			call('admin.getList', { 'id':'look_sets',  'params': { 'clientId':clientId } } )
		).done( function(lookTypes,lookSets) {

			$('#look_sets').opener({
				'title': 'КОМПЛЕКТ',
				'list': lookSets[0],
				'onClick': function(v) { lookSet=v; },
				'onSecondClick': function(v) { lookSet=0; },
				'value': lookSet
			});
			
			$('#look_types').opener({
				'title': 'КУДА ИДЕМ',
				'list': lookTypes[0],
				'onClick': function(v) { lookType=v; },
				'onSecondClick': function(v) { lookType=0; },
				'value': lookType
			});
			
			call('session.get', { 'name':'lookID' } ).done( function(id) {
				lookId = id;
				loadLook();
			} );
		} );
		
		call('session.get',{ 'name':'closet_filter' }).done(function(filter){
			if (filter) {
				shopFilter = filter.shop || {};
				closetFilter = filter.closet || {};
			}
			
			$('#closets').opener({
				'title': 'ШКАФ',
				'list': closets,
				'onClick': function(v) { closetFilter.closet=v; refreshGalleries(); },
				'onSecondClick': function(v) { delete closetFilter.closet; refreshGalleries(); },
				'value': closetFilter.closet
			});

			$('#owner_brands').opener({
				'title': 'БРЕНД',
				'list': brands,
				'onClick': function(v) { closetFilter.brand = v; refreshGalleries(); },
				'onSecondClick': function(v) { delete closetFilter.brand; refreshGalleries(); },
				'value': closetFilter.brand
			});
			
			$('#owner_seasons').opener({
				'title': 'СЕЗОН',
				'list': seasons,
				'onClick': function(v) { closetFilter.season = v;  refreshGalleries(); },
				'onSecondClick': function(v) { delete closetFilter.season;  refreshGalleries(); },
				'value': closetFilter.season
			});
			
			$('#bought').opener({
				'title': 'КУПЛЕНЫ',
				'list': [[1,1,'Вчера'],[7,7,'Неделя'],[30,30,'Месяц'],[90,90,'3 месяца'],[180,180,'Полгода'],[360,360,'Год']],
				'onClick': function(v) { closetFilter.bought=[v,'<=']; refreshGalleries(); },
				'onSecondClick': function(v){ delete closetFilter.bought; refreshGalleries(); },
				'value': ('bought' in closetFilter) ? closetFilter.bought[0] : 0
			});
			

			$('#brands').opener({
				'title': 'БРЕНД',
				'list': brands,
				'onClick': function(v) { shopFilter.brand = v; refreshGalleries(); },
				'onSecondClick': function(v) { delete shopFilter.brand; refreshGalleries(); },
				'value': shopFilter.brand
			});
			
			$('#seasons').opener({
				'title': 'СЕЗОН',
				'list': seasons,
				'onClick': function(v) { shopFilter.season = v;  refreshGalleries(); },
				'onSecondClick': function(v) { delete shopFilter.season; refreshGalleries(); },
				'value': shopFilter.season
			});

			$('#added').opener({
				'title': 'ДОБАВЛЕНЫ',
				'list': [[1,1,'Вчера'],[7,7,'Неделя'],[30,30,'Месяц'],[90,90,'3 месяца'],[180,180,'Полгода'],[360,360,'Год']],
				'onClick': function(v){ shopFilter.added=[v,'<=']; refreshGalleries(); },
				'onSecondClick': function(v){ delete shopFilter.added; refreshGalleries(); },
				'value': ('added' in shopFilter) ? shopFilter.added[0] : 0
			});
			
			
			$('#only_recommended').click(function(e){
				if ($(e.target).hasClass('checked')) {
					shopFilter.recommended = 1;
				} else {
					delete shopFilter.recommended;
				}
				refreshGalleries();
			}).addClass(('recommended' in shopFilter)?'checked':'');
			

			call('session.get',{ 'name':'closet_galleries' }).done(function(galleries){
				for (var i=0; i<galleries.length; ++i) {
					var stripeId = 'stripe_' + (parseInt(galleries[i][1]) ? 'own_' : 'shop_') + galleries[i][0];
					$('#container').append( $('<div>').attr('id',stripeId) );
					selectInMultipleOpener(parseInt(galleries[i][1]) ? 'own' : 'shop', galleries[i][0]);
				}
			});
		});
	
		
		$('.actions-list form').tmpFile({ 
			'onAdd': function(path) {	
				call('image.getThumbnail', { 'path':path, 'width':270, 'height':500 } ).done( function(thumbnail) {
					$('#look_background').attr('src',thumbnail).attr('orig',path.replace(/^tmp/,'looks')).show();
				})
			}
		});
		
		$(document).keyup(function(e) {
			if (e.keyCode == 27) { closeLook() }   // esc
		});

		
		
		/**** pop-up add windows ****/
		
		$('#newLookSet').popup({
			'onShow': function(target){ target.find('input[name=name]').val('').focus(); },
			'onOk': function(params) {
				if (params.name) {
					call('admin.doAction',{ id:'look_sets_admin.add', 'params':{ 'client_id':clientId, 'name':params.name } }).done(function(newId){
						call('admin.getList',{ 'id':'look_sets',  'params':{ 'clientId':clientId } }).done(function(lookSets){
							lookSet = newId;
							$('#look_sets').opener('list',lookSets).opener('value',lookSet);
						})
					});
				}
			}
		});
		$('#look_sets .add-link').click(function(e){
			e.preventDefault();
			$('#newLookSet').popup('show', $(this).offset().top-5, $(this).offset().left-140);
		});
		
		
		$('#newLookType').popup({
			'onShow': function(target){ target.find('input[name=name]').val('').focus(); },
			'onOk': function(params) {
				if (params.name) {
					call('admin.doAction',{ id:'look_types_admin.add', 'params':{ 'client_id':clientId, 'name':params.name } }).done(function(newId){
						call('admin.getList',{ 'id':'look_types',  'params':{ 'clientId':clientId } }).done(function(lookTypes){
							lookType = newId;
							$('#look_types').opener('list',lookTypes).opener('value',lookType);
						})
					});
				}
			}
		});
		$('#look_types .add-link').click(function(e){
			e.preventDefault();
			$('#newLookType').popup('show', $(this).offset().top-5, $(this).offset().left-140);
		});
		
	});
</script>